import React, {Component} from 'react';
import IceContainer from '@icedesign/container';
import API from '../../../../tools/API';
import {Table,Pagination,Button,Feedback,Dialog} from '@icedesign/base';
import IceLabel from '@icedesign/label';
import AddRole from './components/AddRole';
import FoundationSymbol from 'foundation-symbol';
import './ErpRoleList.scss';

/**
*  角色列表
*/
export default class ErpRoleList extends Component{
  constructor(props) {
     super(props);
     this.state = {
       isLoading:true,
       query:{
         parent_id:0
       },
       current:1,
       total:0,
       data:[],
       rowSelection: {
          onChange: this.onChange.bind(this),
          selectedRowKeys: [],
          getProps: record => {
            return {
              disabled: record.id === 1
            };
          }
       }
     }
     this.getRoleListData = this.getRoleListData.bind(this);
     this.deleteRole = this.deleteRole.bind(this);
  }

  onChange(ids, records) {
    let { rowSelection } = this.state;
    rowSelection.selectedRowKeys = ids;
    this.setState({ rowSelection });
  }

  //初始化
  componentWillMount(){
    //获取当前登录用户信息
    this.getRoleListData();
  }

  getRoleListData(){
    //获取当前登录用户信息
    API.getRoleListData(this.state.query).then((res) => {
      console.log(res);
      //设置展开tree
      this.setState({
        data:res.result.list,
        isLoading:false,
        current:res.result.page_number,
        total:res.result.total_row
      });
    })
  }

  //类型
  renderType = (value,index,record) =>{
    return (
      <div>
        {
          record.status == 0?
            <IceLabel status="success">启用</IceLabel>
          :
            <IceLabel status="danger">停用</IceLabel>
        }
      </div>
    )
  }

  //删除字典
  deleteRole(){
    const ids = this.state.rowSelection.selectedRowKeys;
    if (ids.length === 0) {
      Feedback.toast.prompt("请选择删除的记录");
      return;
    }
    let dialog = Dialog.confirm({
      content: "确定要删除吗？",
      locale: {
        ok: "确认",
        cancel: "取消"
      },
      onOk: () => {
        return new Promise(resolve => {
          API.delRole({ids:this.state.rowSelection.selectedRowKeys}).then((res) => {
            Feedback.toast.success("删除成功");
            this.getRoleListData();
            dialog.hide();
          });
        });
      }
    });
  }

  //操作
  renderCaozuo(value,index,record){
    return (
      <div>
        <AddRole reload={this.getRoleListData} role={record}/>
      </div>
    )
  }

  render(){
    return(
      <div>
        <IceContainer title="角色列表" loading={this.state.isLoading}>
          <div className="menu-caozuo">
            <AddRole reload={this.getRoleListData} />
            <span style={{margin:'0 5px'}}>
              <Button onClick={this.deleteRole} type="primary"  shape="warning">
                <FoundationSymbol size="small" type="delete" /> 删除
              </Button>
            </span>
          </div>
          <Table
            dataSource={this.state.data}
            hasBorder={false}
            primaryKey="id"
            isTree = {true}
            indentSize={12}
            rowSelection={this.state.rowSelection}
          >
            <Table.Column align={"center"} width={110} title="角色名称" dataIndex="name"/>
            <Table.Column align={"center"} width={110} title="角色编码" dataIndex="auth_key"/>
            <Table.Column align={"center"} width={70} title="排序" dataIndex="sort"/>
            <Table.Column align={"center"} width={70} title="状态" cell={this.renderType.bind(this)}/>
            <Table.Column align={"center"} width={150} title="备注" dataIndex="remarks" />
            <Table.Column align={"center"} width={160} title="时间" dataIndex="create_date" />
            <Table.Column align={"center"} width={140} title="操作" cell={this.renderCaozuo.bind(this)}  />
          </Table>
          <Pagination
            style={{
              marginTop: '20px',
              textAlign: 'right',
            }}
            current={this.state.current}
            onChange={(current) => {
              this.state.query["pageNum"] = current;
              this.setState(this.state);
              this.getRoleListData();
            }}
            total={this.state.total}
          />
        </IceContainer>
      </div>
    )
  }


}
